<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/icon.css">
<head>
    <meta charset="UTF-8">
    <title>frid</title>
</head>
<body>
    <header class="top">
        <div class="top-box"><img class="top-img" src="imgs/qqmusic.png"></div>
    </header>
    <mian>
        <div class="list-top">
            <div class="list-top-1">歌 单 推 荐</div>
            <div class="list-top-2">
                <a class="top-2-text text-d">为你推荐</a>
                <a class="top-2-text">运动</a>
                <a class="top-2-text">网络歌曲</a>
                <a class="top-2-text">思念</a>
                <a class="top-2-text">官方歌曲</a>
                <a class="top-2-text">情歌</a>
            </div>
            <div class="list-top-3">
                <div class="top-3-item">
                    <div class="top-3-img">
                        <img class="top-3-img-top" src="http://qpic.y.qq.com/music_cover/8HhavvWNIicpyjlv0UnT5TWLRxhfmGTVwYtiaWd54wZItUPRu7486Fqw/300?n=1">
                        <div class="top-3-cover"></div>
                        <img class="top-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="top-3-title">翻唱女神J.Fla | 只唱你最爱的旋律</div>
                    <div class="top-3-listen">播放量：8915496</div>
                </div>
                <div class="top-3-item">
                    <div class="top-3-img">
                        <img class="top-3-img-top" src="http://qpic.y.qq.com/music_cover/GUalk7A0sBGvkxmUrXIf7KnEVGJFicuoT7xSkZLHiaEMB5Ojbccf6cbA/300?n=1">
                        <div class="top-3-cover"></div>
                        <img class="top-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="top-3-title">古风女声控，优美旋律为你而来</div>
                    <div class="top-3-listen">播放量：1712723</div>
                </div>
                <div class="top-3-item">
                    <div class="top-3-img">
                        <img class="top-3-img-top" src="http://qpic.y.qq.com/music_cover/QrmdXDG3R4jGSEzqu0qtR4vw6Glga0N83eKicVCib61BZw5lZtWEUMibQ/300?n=1">
                        <div class="top-3-cover"></div>
                        <img class="top-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="top-3-title">想开一家早餐店，叫“早点见面”</div>
                    <div class="top-3-listen">播放量：525134</div>
                </div>
                <div class="top-3-item">
                    <div class="top-3-img">
                        <img class="top-3-img-top" src="http://qpic.y.qq.com/music_cover/R8unPZMA4Vp5v2Ms96bst9nFCfe4YPBFBADicMz2LB0kLfEiaUM4ymiag/300?n=1">
                        <div class="top-3-cover"></div>
                        <img class="top-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="top-3-title">好评999+英文歌！轻松解压100％</div>
                    <div class="top-3-listen">播放量：123948993</div>
                </div>
                <div class="top-3-item">
                    <div class="top-3-img">
                        <img class="top-3-img-top" src="http://qpic.y.qq.com/music_cover/IknB7UUG0ME0zalRpPKYjJiauia2kJzKs5gtKQY4Vq9TJYLXdjQK9fCA/300?n=1">
                        <div class="top-3-cover"></div>
                        <img class="top-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="top-3-title">书房背景乐 沉浸于字里行间的时光</div>
                    <div class="top-3-listen">播放量：3033660</div>
                </div>
            </div>
        </div>
        <div class="list-middle">
            <div class="list-middle-1">新 歌 首 发</div>
            <div class="list-middle-2">
                <div class="list-middle-2-on">
                    <div class="list-middle-2-img"></div>
                    <div class="list-middle-2-text">
                        <span class="text-1"> 播放全部</span>
                    </div>
                </div>
                <div class="list-middle-2-place">
                    <div class="list-middle-2-item text-d">最新</div>
                    <div class="list-middle-2-item">内地</div>
                    <div class="list-middle-2-item">港台</div>
                    <div class="list-middle-2-item">欧美</div>
                    <div class="list-middle-2-item">韩国</div>
                    <div class="list-middle-2-item">日本</div>
                </div>
            </div>
            <div class="list-middle-3">
                <div class="list-middle-3-item">
                    <div class="list-middle-3-img">
                        <img class="middle-3-img-top" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002myPA84G7kxG_1.jpg">
                        <div class="middle-3-cover"></div>
                        <img class="middle-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-middle-3-intro">
                        <p class="list-middle-3-title">Sabotage</p>
                        <p class="list-middle-3-author">Bebe Rexha</p>
                    </div>
                    <div class="list-middle-3-time">02:56</div>
                </div>
                <div class="list-middle-3-item">
                    <div class="list-middle-3-img">
                        <img class="middle-3-img-top" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003UIhdS4fBLqU_1.jpg">
                        <div class="middle-3-cover"></div>
                        <img class="middle-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-middle-3-intro">
                        <p class="list-middle-3-title">如果人人爱音乐</p>
                        <p class="list-middle-3-author">张蔷</p>
                    </div>
                    <div class="list-middle-3-time">03:46</div>
                </div>
                <div class="list-middle-3-item">
                    <div class="list-middle-3-img">
                        <img class="middle-3-img-top" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002v6ztM40D0iP_1.jpg">
                        <div class="middle-3-cover"></div>
                        <img class="middle-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-middle-3-intro">
                        <p class="list-middle-3-title">你就不要想起我</p>
                        <p class="list-middle-3-author">R1SE赵磊</p>
                    </div>
                    <div class="list-middle-3-time">04:30</div>
                </div>
                <div class="list-middle-3-item">
                    <div class="list-middle-3-img">
                        <img class="middle-3-img-top" src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000005wEOc07Udwu_1.jpg">
                        <div class="middle-3-cover"></div>
                        <img class="middle-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-middle-3-intro">
                        <p class="list-middle-3-title">软肋</p>
                        <p class="list-middle-3-author">李宇春</p>
                    </div>
                    <div class="list-middle-3-time">04:17</div>
                </div>
                <div class="list-middle-3-item">
                    <div class="list-middle-3-img">
                        <img class="middle-3-img-top" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003vGVIq243Mzm_2.jpg">
                        <div class="middle-3-cover"></div>
                        <img class="middle-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-middle-3-intro">
                        <p class="list-middle-3-title">一爱如故 《长歌行》电视剧插曲</p>
                        <p class="list-middle-3-author">摩登兄弟刘宇宁</p>
                    </div>
                    <div class="list-middle-3-time">03:55</div>
                </div>
                <div class="list-middle-3-item">
                    <div class="list-middle-3-img">
                        <img class="middle-3-img-top" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000hNAwr4dbutH_1.jpg">
                        <div class="middle-3-cover"></div>
                        <img class="middle-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-middle-3-intro">
                        <p class="list-middle-3-title">向宿命挥拳的人 《新斗罗大陆》手游戴沐白角色曲</p>
                        <p class="list-middle-3-author">阿云嘎</p>
                    </div>
                    <div class="list-middle-3-time">04:00</div>
                </div>
                <div class="list-middle-3-item">
                    <div class="list-middle-3-img">
                        <img class="middle-3-img-top" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000dcpok0A8RP3_2.jpg">
                        <div class="middle-3-cover"></div>
                        <img class="middle-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-middle-3-intro">
                        <p class="list-middle-3-title">花好月圆</p>
                        <p class="list-middle-3-author">周迅</p>
                    </div>
                    <div class="list-middle-3-time">02:34</div>
                </div>
                <div class="list-middle-3-item">
                    <div class="list-middle-3-img">
                        <img class="middle-3-img-top" src="https://y.gtimg.cn/music/photo_new/T002R90x90M000004X1Kbg34UHQ5_1.jpg">
                        <div class="middle-3-cover"></div>
                        <img class="middle-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-middle-3-intro">
                        <p class="list-middle-3-title">Renegades 《浪客剑心 最终章》电影主题曲</p>
                        <p class="list-middle-3-author">ONE OK ROCK</p>
                    </div>
                    <div class="list-middle-3-time">04:04</div>
                </div>
                <div class="list-middle-3-item">
                    <div class="list-middle-3-img">
                        <img class="middle-3-img-top" src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000018mpfj0lSvS0_1.jpg">
                        <div class="middle-3-cover"></div>
                        <img class="middle-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-middle-3-intro">
                        <p class="list-middle-3-title">驯化者</p>
                        <p class="list-middle-3-author">陈俊豪 / 陈誉庚 / TGM-姜京佐 / 刘冠佑 / 罗一舟 / 唐九洲 / G.G张思源</p>
                    </div>
                    <div class="list-middle-3-time">03:28</div>
                </div>
            </div>
        </div>
        <div class="list-button">
            <div class="list-botton-1">M V</div>
            <div class="list-botton-2">
                <div class="list-botton-place text-d">精选</div>
                <div class="list-botton-place">内地</div>
                <div class="list-botton-place">韩国</div>
                <div class="list-botton-place">港台</div>
                <div class="list-botton-place">欧美</div>
                <div class="list-botton-place">日本</div>
            </div>
            <div class="list-botton-3">
                <div class="list-botton-3-item">
                    <div class="list-botton-img">
                        <img class="botton-3-img-top" src="https://y.gtimg.cn/music/photo_new/T015R640x360M102000SY7kU0vIuoT.jpg">
                        <div class="botton-3-cover"></div>
                        <img class="booton-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-botton-3-title">向宿命挥拳的人 (《新斗罗大陆》手游戴沐白角色曲)</div>
                    <div class="list-botton-3-author">阿云嘎</div>
                    <div class="list-botton-3-count">
                        <span class="text-2">9370</span>
                    </div>
                </div>
                <div class="list-botton-3-item">
                    <div class="list-botton-img">
                        <img class="botton-3-img-top" src="https://y.gtimg.cn/music/photo_new/T015R640x360M000003vHDbe24Jqpl.jpg">
                        <div class="botton-3-cover"></div>
                        <img class="booton-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-botton-3-title">雨</div>
                    <div class="list-botton-3-author">Sunnee杨芸晴</div>
                    <div class="list-botton-3-count">
                        <span class="text-2">3585</span>
                    </div>
                </div>
                <div class="list-botton-3-item">
                    <div class="list-botton-img">
                        <img class="botton-3-img-top" src="https://y.gtimg.cn/music/photo_new/T015R640x360M1010047OlaH3P3f0J.jpg">
                        <div class="botton-3-cover"></div>
                        <img class="booton-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-botton-3-title">一爱如故 (《长歌行》电视剧插曲)</div>
                    <div class="list-botton-3-author">摩登兄弟刘宇宁</div>
                    <div class="list-botton-3-count">
                        <span class="text-2">43495</span>
                    </div>
                </div>
                <div class="list-botton-3-item">
                    <div class="list-botton-img">
                        <img class="botton-3-img-top" src="https://y.gtimg.cn/music/photo_new/T015R640x360M101002cYg662xvSlL.jpg">
                        <div class="botton-3-cover"></div>
                        <img class="booton-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-botton-3-title">我很好骗</div>
                    <div class="list-botton-3-author">动力火车</div>
                    <div class="list-botton-3-count">
                        <span class="text-2">11301</span>
                    </div>
                </div>
                <div class="list-botton-3-item">
                    <div class="list-botton-img">
                        <img class="botton-3-img-top" src="https://y.gtimg.cn/music/photo_new/T015R640x360M101001YVtJL2sr2Z7.jpg">
                        <div class="botton-3-cover"></div>
                        <img class="booton-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-botton-3-title">造梦时学会飞行 (《声梦传奇》主题曲)</div>
                    <div class="list-botton-3-author">TVB</div>
                    <div class="list-botton-3-count">
                        <span class="text-2">1539</span>
                    </div>
                </div>
                <div class="list-botton-3-item">
                    <div class="list-botton-img">
                        <img class="botton-3-img-top" src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003RlAau1dFne3.jpg">
                        <div class="botton-3-cover"></div>
                        <img class="booton-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-botton-3-title">What's Wrong With Me (Punk Version)"</div>
                    <div class="list-botton-3-author">Lil Ghost小鬼</div>
                    <div class="list-botton-3-count">
                        <span class="text-2">206872</span>
                    </div>
                </div>
                <div class="list-botton-3-item">
                    <div class="list-botton-img">
                        <img class="botton-3-img-top" src="https://y.gtimg.cn/music/photo_new/T015R640x360M102003c3tSe1ehWwN.jpg">
                        <div class="botton-3-cover"></div>
                        <img class="booton-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-botton-3-title">Let's Party (《和平精英》2周年庆派对邀请曲)</div>
                    <div class="list-botton-3-author">吴宣仪</div>
                    <div class="list-botton-3-count">
                        <span class="text-2">67024</span>
                    </div>
                </div>
                <div class="list-botton-3-item">
                    <div class="list-botton-img">
                        <img class="botton-3-img-top" src="https://y.gtimg.cn/music/photo_new/T015R640x360M0000013X2t31kvJC4.jpg">
                        <div class="botton-3-cover"></div>
                        <img class="booton-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-botton-3-title">鋼の羽根</div>
                    <div class="list-botton-3-author">RADWIMPS</div>
                    <div class="list-botton-3-count">
                        <span class="text-2">2927</span>
                    </div>
                </div>
                <div class="list-botton-3-item">
                    <div class="list-botton-img">
                        <img class="botton-3-img-top" src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003aYDEH2kWTX7.jpg">
                        <div class="botton-3-cover"></div>
                        <img class="booton-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-botton-3-title">에필로그 (epilogue)</div>
                    <div class="list-botton-3-author">IU</div>
                    <div class="list-botton-3-count">
                        <span class="text-2">8197</span>
                    </div>
                </div>
                <div class="list-botton-3-item">
                    <div class="list-botton-img">
                        <img class="botton-3-img-top" src="https://y.gtimg.cn/music/photo_new/T015R640x360M101000xHMCS1g3sSW.jpg">
                        <div class="botton-3-cover"></div>
                        <img class="booton-3-img-button" src="imgs/cover_play.png">
                    </div>
                    <div class="list-botton-3-title">圭贤《Coffee》MV</div>
                    <div class="list-botton-3-author">圭贤</div>
                    <div class="list-botton-3-count">
                        <span class="text-2">15163</span>
                    </div>
                </div>
            </div>
        </div>
    </mian>
    <footer class="footer"></footer>
</body>
</html>